<!--
Copyright (c) 2021-2024 SigScalr, Inc.

This file is part of SigLens Observability Solution

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->

<!DOCTYPE html>
<html lang="en">
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-5SBJC04YFB"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-5SBJC04YFB');
    </script>

<head>
    <meta charset="UTF-8">
    <title>SigLens</title>

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
    <link rel="manifest" href="assets/site.webmanifest">
    <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">

    <link rel="stylesheet" href="./css/lib/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/lib/all.min.css" />
    <link rel="stylesheet" href="./css/lib/ag-grid.min.css" />
    <link rel="stylesheet" href="./css/lib/tippy.css" />
    <link rel="stylesheet" href="./css/lib/jquery.tagsinput.min.css" />
    <link rel="stylesheet" href="./css/lib/jquery-ui.min.css" />
    <link rel="stylesheet" href="./css/siglens.css?cb={{ AppVersion }}" />
    <link rel="stylesheet" href="./css/query-builder.css?cb={{ AppVersion }}" />
    <link rel="stylesheet" href="./css/metrics-explorer.css?cb={{ AppVersion }}" />

    <style>
        .metrics-graph-container{
            display: block;
        }
        .metrics-graph{
            margin-bottom: 10px;
        }
        .metrics-graph, #merged-graph-container{
            height: 310px;
        }
        .graph-canvas{
            height: calc(310px - 85px);
            padding: 10px;
        }
        #metrics-explorer, #metrics-graphs{
            display: none;
        }
        .query-builder-container{
            margin: 0px;
            background-color: var(--bg-color);
        }
    </style>
    <script src="./js/lib/lodash.min.js"></script>
    <script src="./js/lib/jquery-3.6.0.min.js"></script>
    <script src="./js/lib/jquery-ui.min.js"></script>
    <script src="./js/lib/js.cookie.min.js"></script>
    <script src="./js/lib/moment.min.js"></script>
    <script src="./js/lib/date_fns.min.js"></script>
    <script src="./js/lib/popper.min.js"></script>
    <script src="./js/lib/tippy-bundle.umd.min.js"></script>
    <script src="./js/lib/bootstrap.bundle.min.js"></script>
    <script src="./js/lib/ag-grid-community.min.noStyle.js"></script>
    <script src="./js/lib/echarts.min.js"></script>
    <script src="./js/lib/chart.umd.min.js"></script>
    <script src="./js/lib/chartjs-adapter-date-fns.bundle.min.js"></script>
    <script src="./js/lib/chartjs-plugin-annotation.min.js"></script>
    <script>
        var defaultTheme = Cookies.get('theme') || 'light';
        $('html').attr('data-theme', defaultTheme);
    </script>
    {{ .RunCheck1 | safeHTML }}
</head>

<body>
    <div id="app-container">

        <div id="app-side-nav">
        </div>

        <div id="alerting">
            <!-- create alert form -->
            <div class="form-container" id="alerting-form-container">
                <form id="alert-form">
                    <div class="d-flex btn-container">
                        <button class="btn btn-secondary mx-3" id="cancel-alert-btn" type="button" tabindex="9">Cancel</button>
                        <button class="btn btn-primary" id="save-alert-btn" type="submit" tabindex="10">Save</button>
                    </div>
                    <div class="add-alert-form">
                        <div id="metrics-graphs" class="metrics-graph-container">

                        </div>
                        <div id="logs-explorer">

                        </div>
                        <div class="subsection-heading">
                            <div class="circle">1</div>
                            <div>Query</div>
                        </div>
                        <div class="alert-form-subsection">
                            <div class="query-lang-container">
                                <div class="index-box">
                                    <div style="margin-right: 5px;">Indexes:</div>
                                    <div class="index-container">
                                        <input type="text" name="" id="index-listing">
                                        <button id="add-index" class="add-con btn">+</button>
                                    </div>
                                </div>
                                <div class="dropdown timepicker">
                                    <button class="btn dropdown-toggle" type="button" id="date-picker-btn"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                        data-bs-toggle="dropdown" title="Pick the time window">
                                        <span>Time Picker</span>
                                        <i class="dropdown-arrow"></i>
                                    </button>
                                    <div class="dropdown-menu daterangepicker" aria-labelledby="index-btn"
                                        id="daterangepicker ">
                                        <p class="dt-header">Search the last</p>
                                        <div class="ranges">
                                            <div class="inner-range">
                                                <div id="now-5m" class="range-item ">5 Mins</div>
                                                <div id="now-3h" class="range-item">3 Hrs</div>
                                                <div id="now-2d" class="range-item">2 Days</div>
                                            </div>
                                            <div class="inner-range">
                                                <div id="now-15m" class="range-item">15 Mins</div>
                                                <div id="now-6h" class="range-item">6 Hrs</div>
                                                <div id="now-7d" class="range-item">7 Days</div>
                                            </div>
                                            <div class="inner-range">
                                                <div id="now-30m" class="range-item">30 Mins</div>
                                                <div id="now-12h" class="range-item">12 Hrs</div>
                                                <div id="now-30d" class="range-item">30 Days</div>
                                            </div>
                                            <div class="inner-range">
                                                <div id="now-1h" class="range-item">1 Hr</div>
                                                <div id="now-24h" class="range-item">24 Hrs</div>
                                                <div id="now-90d" class="range-item">90 Days</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="query-container position-relative">
                                <div id = "custom-code-tab" class="custom-code-tab">
                                    <div class="query-builder-container">
                                        <div class="d-flex justify-content-end">
                                            <ul class="tab-list">
                                                <li class="tab-li tab-li-query" id = "tab-title1"><a href="#tabs-1" class="custom-query-builder">Builder</a></li>
                                                <li class="tab-li tab-li-code" id = "tab-title2"><a href="#tabs-2"  class="custom-query-builder">Code</a></li>
                                            </ul>
                                        </div>
                                        <div class="d-flex">
                                            <div id = "tabs-1">
                                                <div class="filter-info">
                                                    <div id="filter-container" class="position-relative">
                                                        <div class="filter-con">
                                                            <div class="filter-box" id="filter-box-1">
                                                                <span class = "aggregations" id="search-filter-text">Search filter</span>
                                                                <ul id="tags" class="tags-list"></ul>
                                                                <button id="add-con" class="add-con btn">+</button>
                                                            </div>
                                                            <div class="add-filter" id="add-filter">
                                                                <input id="column-first" class="column-first" type="hidden" onkeyup="checkContent(this)"/>
                                                                <input id="symbol" class="symbol" type="hidden" onkeyup="checkContent(this)"/>
                                                                <input id="value-first" class="value-first" type="hidden" onkeyup="checkContent(this)"/>
                                                                <button id="completed" class="completed btn"></button>
                                                                <button id="cancel-enter" class="cancel-enter btn">×</button>
                                                            </div>
                                                        </div>
                                                        <div class="builder-div">stats</div>
                                                        <div class="filter-con second-enter">
                                                            <div class="filter-box" id="filter-box-2">
                                                                <span class = "aggregations" id="aggregate-attribute-text">Aggregation attribute</span>
                                                                <ul id="tags-second" class="tags-list"></ul>
                                                                <button id="add-con-second" class="add-con btn">+</button>
                                                            </div>
                                                            <div class="add-filter add-filters" id="add-filter-second">
                                                                <input id="column-second" class="column-first" type="hidden" onkeyup="checkSecondContent(this)"/>
                                                                <input id="value-second" class="value-first" type="hidden" onkeyup="checkSecondContent(this)"/>
                                                                <button id="completed-second" class="completed btn" ></button>
                                                                <button id="cancel-enter-second" class="cancel-enter btn">×</button>
                                                            </div>
                                                        </div>
                                                        <div class="builder-div">group by</div>
                                                        <div class="filter-con third-enter">
                                                            <div class="filter-box third-box"  id="filter-box-3">
                                                                <span class = "aggregations" id="aggregations">Group by column name</span>
                                                                <ul id="tags-third" class="tags-list"></ul>
                                                                <button id="add-con-third" class="add-con btn">+</button>
                                                            </div>
                                                            <div class="add-filter add-third" id="add-filter-third">
                                                                <input id="column-third" class="column-third" type="hidden" />
                                                                <button id="cancel-enter-third" class="cancel-enter btn">×</button>
                                                            </div>
                                                        </div>
                                                        <div class="require-field-tooltip" id="logs-error">Please fill a query</div>
                                                    </div>
                                                    <button class="search-img" id="query-builder-btn" type="button"></button>
                                                </div>
                                            </div>
                                            <div id = "tabs-2">
                                                <div class="filter-container">
                                                    <div class="position-relative search-bar-container">
                                                        <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip"
                                                        id="info-icon-spl" style="display: block;" title='city=Boston | stats count
                                                    city=* | stats avg(latency)
                                                    city=Boston | stats count AS Count BY weekday
                                                    city=Boston | stats count AS Count BY job_description
                                                    '></i>
                                                        <textarea class="form-control expandable-textarea" id="filter-input"
                                                            placeholder="Enter your SPL query here, or click the 'i' icon for examples" type="text"></textarea>
                                                        <span class="clear-icon" id="clearInput" title="Clear"></span>
                                                    </div>
                                                    <div class="text-end">
                                                        <button class="btn run-filter-btn" id="run-filter-btn" title="Run your search" type="button"></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="metrics-explorer">
                                <div id="metrics-queries"></div>
                                <div id="metrics-formula"></div>
                                 <div class="mt-3 d-flex ">
                                     <button id="add-query" class="btn btn-white" type="button"><span class="plus-icon">+</span> Add Query</button>
                                     <button id="add-formula" class="btn btn-white" type="button"><span class="plus-icon">+</span> Add Formula</button>
                                 </div>
                             </div>
                        </div>
                        <div class="subsection-heading">
                            <div class="circle">2</div>
                            <div>Set Condition</div>
                        </div>
                        <div class="alert-form-subsection">
                            <div class="condition-container">
                                <div class="dropdown">
                                    <button class="btn dropdown-toggle" type="button" id="alert-condition"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                        data-bs-toggle="dropdown">
                                        <span>Is above</span>
                                        <i class="dropdown-arrow"></i>
                                    </button>
                                    <div class="dropdown-menu box-shadow alert-condition-options"
                                        aria-labelledby="index-btn">
                                        <li id="option-0" class="alert-condition-option active">Is above</li>
                                        <li id="option-1" class="alert-condition-option">Is below</li>
                                        <li id="option-2" class="alert-condition-option">Equal to</li>
                                        <li id="option-3" class="alert-condition-option">Not equal to</li>
                                    </div>
                                </div>
                                <div class="condition-value">
                                    <input type="number" name="condition-value" step="any" id="threshold-value"
                                        value="0" class="form-control" tabindex="3">
                                </div>
                            </div>
                            <div class="evaluation-container position-relative">
                                <div>
                                    <label for="evaluation-interval" id="label-evaluate-every">Evaluate every
                                        <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip"
                                        id="info-evaluate-every" style="display: block;" title='How often the alert will be evaluated to see if it fires'>
                                        </i>
                                    </label>

                                    <input type="number" name="evaluate-every" min="0" id="evaluate-every" value="1" tabindex="4"
                                        class="form-control" step="any"></input>min
                                    <span style="margin-left: 10px;" id="for-span">
                                            for
                                        <i class="fa fa-info-circle position-absolute info-icon" rel="tooltip"
                                        id="info-evaluate-for" style="display: block;" title='Once condition is breached, alert will go into pending state.
                                        If it is pending for longer than the "for" value, it will become a firing alert.'>
                                        </i>
                                    </span>
                                    <div style="position: relative;" class="d-flex">
                                        <input type="number" name="evaluate-every" id="evaluate-for" value="1" min="0" tabindex="5"
                                        class="form-control"></input>min
                                        <div class="evaluation-error-message" style="display: none;">
                                            <div class="icon-container">
                                                <i class="fas fa-exclamation"></i>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="subsection-heading">
                            <div class="circle">3</div>
                            <div>Notification</div>
                        </div>
                        <div class="alert-form-subsection">
                            <div class="notification-container">
                                <div>
                                    Send to
                                </div>
                                <div class="dropdown">
                                    <button class="btn dropdown-toggle" type="button" id="contact-points-dropdown"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                        data-bs-toggle="dropdown">
                                        <span>Choose</span>
                                        <i class="dropdown-arrow"></i>
                                    </button>
                                    <div class="dropdown-menu box-shadow contact-points-options"
                                        aria-labelledby="index-btn">
                                        <li id="option-0" class="contact-points-option">Add New</li>
                                    </div>
                                    <div class="require-field-tooltip" id="contact-point-error">Please choose a contact point option!</div>
                                </div>
                            </div>
                            <div class="message-info" id="message-info">
                                Message<textarea name="message" id="notification-msg" rows="4" class="message" tabindex="6"
                                    required></textarea>
                            </div>
                        </div>
                        <div class="subsection-heading">
                            <div class="circle">4</div>
                            <div>Alert Rule</div>
                        </div>
                        <div class="alert-form-subsection">
                            <label for="alert-rule-name">Rule name</label>
                            <input type="text" class="form-control" placeholder="Enter rule name" id="alert-rule-name" required tabindex="1">
                        </div>
                        <div class="label-subsection">
                            <label for="custom-label">Custom Label</label>
                            <div class="d-flex align-items-end mb-0">
                                <div class="label-main-container mb-0">
                                </div>
                                <button class="add-label-container btn btn-grey" type="button"><span class="plus-icon">+</span>Add Label</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- Overlay -->
            <div class="popupOverlay">
            </div>
            <!-- Add contact point popup -->
            <div class="popupContent" id="add-new-contact-popup">
                <h3 class="header">Create Contact Point</h3>
                <div class="form-container" id="contact-form-container">
                </div>
            </div>
        </div>

        <div id="app-footer">
        </div>

    </div>

    <script src="./js/navbar.js?cb={{ AppVersion }}"></script>
    <script src="./js/common.js?cb={{ AppVersion }}"></script>
    <script src="./js/event-handlers.js?cb={{ AppVersion }}"></script>
    <script src="./js/date-picker.js?cb={{ AppVersion }}"></script>
    <script src="./js/contacts.js?cb={{ AppVersion }}"></script>
    <script src="./js/metrics-explorer.js?cb={{ AppVersion }}"></script>
    <script src="./js/search.js?cb={{ AppVersion }}"></script>
    <script src="./js/index.js?cb={{ AppVersion }}"></script>
    <script src="./js/query-builder.js?cb={{ AppVersion }}"></script>
    <script src="./js/alert.js?cb={{ AppVersion }}"></script>
    <script src="./js/dashboard-charts.js?cb={{ AppVersion }}"></script>
    <script src="./component/upper-navbar/upper-navbar.js?cb={{ AppVersion }}"></script>
    <script src="./js/footer.js?cb={{ AppVersion }}"></script>

    {{ .RunCheck2 | safeHTML }}
    {{ .RunCheck3 | safeHTML }}
</body>

</html>
